<template>
  <view>
    <search @tap="toSearch"></search>
    <view class="content">
      <!-- 左侧的滚动视图区域 -->
      <scroll-view calss="content-left" scroll-y :style="{height: wh +'px',width: 120 + 'px'}">
        <block v-for="(item,index) in cateList" :key="index">
          <view :class="['content-left-item', active === index ? 'active' : '']" @tap="acticeChanged(index)">
            {{item.cat_name}}
          </view>
        </block>
      </scroll-view>
      <!-- 二级分类列表 -->
      <scroll-view calss="content-right" scroll-y :style="{height: wh +'px'}" :scroll-top="scrollTop">
        <view class="content-right-item1" v-for="(item, index) in cateLevel2" :key="index">
          <view class="title">/{{item.cat_name}}/</view>
          <!-- 动态渲染三级分类 -->
          <view class="content-right-item1-list">
            <view class="content-right-item1-list-item2" v-for="(item2,index2) in item.children" :key="index2"
              @tap="toGoodsList(item2.cat_id)">
              <!-- 图片 -->
              <image :src="item2.cat_icon"></image>
              <!-- 文本 -->
              <text>{{item2.cat_name}}</text>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
  import cartBadge from '@/mixins/cartTabbar-badge.js'
  import {
    API_Categories
  } from '@/api/API.js'
  import {
    NAV_TO
  } from '@/utils/view_utils.js'
  export default {
    mixins: [cartBadge],
    data() {
      return {
        cateList: [],
        wh: 0, // 动态计算剩余高度 窗口的可用高度 = 屏幕高度 - tabbar高度 - navigationBar高度
        active: 0,
        cateLevel2: [], // 二级分类
        scrollTop: 0, // 右侧的滚动条距离顶部的距离 不设置的话 当前滚动条的位置还是切换前的位置
      }
    },
    onLoad() {
      // 获取系统高度
      uni.getSystemInfo({
        success: res => {
          this.wh = res.windowHeight - 50
        }
      });
      this.getCateList();
    },
    methods: {
      // 获取分类列表
      async getCateList() {
        const {
          data: res
        } = await API_Categories();
        this.cateList = res.message;
        // 初始化二级分类
        this.cateLevel2 = res.message[0].children
      },
      // 改变当前活动的一级分类
      acticeChanged(index) {
        this.active = index;
        this.cateLevel2 = this.cateList[index].children
        // 每当切换一级分类时都需要将右侧的滚动条返回到最顶部，这里不能直接使this.scrollTop = 0
        // 因为this.scrollTop的值没有变化，视图不会重新渲染，所以这里使用了歪门邪道
        this.scrollTop = this.scrollTop ? 0 : 0.1;
      },
      // 点击三级分类跳转到商品列表
      toGoodsList(id) {
        NAV_TO('/subpkg/goods_list/goods_list', {
          cid: id
        })
      },
      // 触发搜索事件去搜索页面
      toSearch() {
        NAV_TO('/subpkg/search/search')
      }
    }
  }
</script>

<style lang="scss" scoped>
  .content {
    display: flex;

    &-left {
      width: 120px;

      &-item {
        line-height: 120rpx;
        background-color: #F7F7F7;
        text-align: center;
        font-size: 24rpx;

        // 当前活动的选项
        &.active {
          background-color: #FFFFFF;
          position: relative;

          // 渲染激活项左侧的红色指示边线
          &::before {
            content: ' ';
            display: block;
            width: 3px;
            height: 30px;
            background-color: #c00000;
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
          }
        }
      }
    }

    &-right {
      &-item1 {
        .title {
          font-size: 24rpx;
          font-weight: bold;
          text-align: center;
          padding: 30rxp 0;
        }

        &-list {
          display: flex;
          flex-wrap: wrap;

          &-item2 {
            width: 33.33%;
            margin-bottom: 20rpx;
            display: flex;
            flex-direction: column;
            align-items: center;

            image {
              width: 120rpx;
              height: 120rpx;
            }

            text {
              font-size: 24rpx;
            }
          }
        }
      }

    }
  }
</style>
